<template>
  <div class="fresh container">
    <div class="nav-box">
      <div class="nav">
        <div class="nav-left"><p>分类</p></div>
        <div class="nav-right">                                      
          <div :class="xzname==item.name ? 'list-act':''" class="list" @click="clicktype($event,item.id)" v-for="item in types"><p>{{item.name}}</p></div>
        </div>
      </div>
      <div class="nav">
        <div class="nav-left"><p>品种</p></div>
        <div class="nav-right">                                      
          <div :class="xzqt==item.name ? 'list-act':''" class="list" @click="clickqt($event,item.id)" v-for="item in qt"><p>{{item.name}}</p></div>
        </div>
      </div>
    </div>
    <div class="big-box">
      <div class="selection">
        <p class="p-head">精选商品</p>
        <router-link v-for="itm in cpList1" class="item" :to="{name:'freshDetail', query:{cpid: itm.id}}"  :key="itm.id">
          <div class="img">
            <img :src="comimgsrc+itm.preview">
          </div>
          <div class="down">
            <div class="name">{{itm.name}}</div>
            <p class="price">{{itm.price}}/{{itm.unit}} <del>{{itm.max_price}}/{{itm.unit}}</del></p>
          </div>
        </router-link>
      </div>
      <div class="right-box">
        <!-- <comProduct v-bind:productList="cpList"></comProduct> -->
        <div class="fresh-list-box">
        <div class="list" v-for="item in cpList">
          <!-- :to="{name:'product-detail', params:{cpid: item.id}}" -->
          <router-link to="/product-detail" :to="{name:'freshDetail', query:{cpid: item.id}}" class="img"><img :src="comimgsrc+item.preview"></router-link>
          <div class="name">{{item.name}}</div>
          <div class="down-box">
            <div class="down-left">
              <div class="price">￥{{item.price}}/{{item.unit}}</div>
              <router-link :to="{name:'freshDetail', query:{cpid: item.id}}" class="buynow">
                立即购买
              </router-link>
            </div>
            <div class="add" @click="addshopcar(item.id,item.price)">
              <i class="icon iconfont icon-gouwuche"></i>
            </div>
          </div>
        </div>
        </div>
        <div class="compage">
          <span @click="syy()"><p>上一页</p></span>
          <span :class="page == n ? 'active':''" v-for="n in last_page" @click="pageon(n)"><p>{{n}}</p></span>
          <span @click="xyy()"><p>下一页</p></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cp1 from '@/assets/image/cp1.jpg';
import cp2 from '@/assets/image/cp2.jpg';
import comProduct from './common/com-product';
import qs from "qs"
import store from '@/vuex/store'
export default {
  name: 'App',
  data(){
    return{
      cp1,cp2,
      xzname:'全部',
      xzqt:'全部',
      comimgsrc:'http://api.mountainfreshes.com',
      types:[],
      addshopcarnum:1,
      page:1,
      last_page: 0,
      qt:[
        {name:'全部'}
      ],

        // {id:21,name:'新鲜红富士苹果',imgsrc:cp1,price:10.0,beforeprice:19.9,spec:'kg'},
        // {id:22,name:'新鲜红富士苹果',imgsrc:cp1,price:10.0,beforeprice:19.9,spec:'kg'},
        // {id:23,name:'新鲜红富士苹果',imgsrc:cp1,price:10.0,beforeprice:19.9,spec:'kg'},
        // {id:24,name:'新鲜红富士苹果',imgsrc:cp1,price:10.0,beforeprice:19.9,spec:'kg'}
      
      cpList1:[],
      cpList:[]
    }
  },
  methods:{
    pageon:function(n){
      this.page = n
      this.getfreshlist()
    },
    syy:function(){
      if(this.page != 1){
        this.page = this.page -1;
        this.getfreshlist()
      }
    },
    xyy:function(){
      if(this.page<this.last_page){
        this.page = this.page +1;
        this.getfreshlist()
      }
    },
    zhqshopcar:function(){
              this.$http.post("/index.php/user/cart/index",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
                  user_id: this.$store.state.userid

              }))
              .then(res => {
                this.$store.state.shopcartnum = res.data.row.length
                
              })
              .catch(error => {
                alert("网络错误")
              });
            
      },
    clicktype:function(e,b){
      this.xzname = e.target.innerHTML
      console.log(b)
      this.$http.get("/index.php/index/goods/CateFreshFruitList?id="+b+"&page="+this.page)
      .then(res => {
        this.cpList = res.data.data.data;
        this.last_page = res.data.data.last_page;
        
        this.qt = res.data.cate_list;
        console.log(res)
        // this.types = res.data;
        // console.log(res)
        // console.log(this.cpList1)
      })
      .catch(error => {
        
      });
    },
    clickqt:function(e,b){
      this.xzqt = e.target.innerHTML
      this.$http.get("/index.php/index/goods/CateFreshFruitList?id="+b+"&page="+this.page)
      .then(res => {
        this.cpList = res.data.data.data;
        this.last_page = res.data.data.last_page;
        console.log(res)
        // this.types = res.data;
        // console.log(res)
        // console.log(this.cpList1)
      })
      .catch(error => {
        
      });
    },
    addshopcar:function(i,dj){
        if(this.$store.state.dlzt!=1){
          this.$confirm('你还没有登录, 不能加入购物车哦', '提示', {
            confirmButtonText: '去登录',
            cancelButtonText: '先逛逛',
            type: 'warning'
          }).then(() => {
            this.$router.push({ path: '/login' })
          }).catch(() => {
                      
          });
        }else{
          this.$http.post("/index.php/user/cart/add_cart_goods",qs.stringify({
          // mobile:this.tel,
          // password:this.pwd
              goods_id: i,
              user_id: this.$store.state.userid,
              quantity: this.addshopcarnum,
              price: dj

          }))
          .then(res => {
            console.log(res)
            this.zhqshopcar();
            this.$message({
                  type: 'success',
                  message: '加入购物车成功!',
                  customClass: 'com-message-tc'
                });
          })
          .catch(error => {
            alert("网络错误")
          });
        }
      },
      getfreshlist:function(){
        this.$http.post("/index.php/index/goods/FreshFruitList",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
                  page: this.page

              }))
          .then(res => {
            this.cpList = res.data.data.data;
            this.last_page = res.data.data.last_page;
            console.log(this.last_page)
            console.log(this.cpList)
          })
          .catch(error => {
            
          });
      }

  },
  components:{
    comProduct
  },
  created(){
    // this.$http.get("/index.php/home/article/choose")
    //   .then(res => {
    //     // console.log(res)
    //     this.cpList1 = res.data;
    //     console.log(this.cpList1)
    //   })
    //   .catch(error => {
        
    // });
    // 品种分类
    this.$http.get("/index.php/index/goods/GoodsCateList?cate_id=2")
      .then(res => {
        
        this.types = res.data;
        // console.log(this.cpList1)
      })
      .catch(error => {
        
      });
      // 精选商品
      this.$http.get("/index.php/index/goods/FreshFruitSelected")
      .then(res => {
        
        this.cpList1 = res.data;
        console.log(this.cpList1)
        
      })
      .catch(error => {
        
      });
      // 首次进入鲜果汇
      this.getfreshlist();
  }
}
</script>

<style scoped lang="less">
.fresh{
  margin: auto;
  height: auto;
  zoom: 1;
  overflow: hidden;
}
.nav-box{
  width: 100%;
  height: auto;
  zoom: 1;
  overflow: hidden;
  margin-top: 20px;
  .nav{
    width: 100%;
    height: auto;
    zoom: 1;
    overflow: hidden;
    border-bottom: 1px dashed #aaaaaa;
    .nav-left{
      width: 60px;
      float: left;
      p{
        font-size: 16px;
        color: #717171;
        padding-top: 8px;
        padding-bottom: 14px;
      }
    }
    .nav-right{
      float: left;
      width: 1140px;
      height: auto;
      zoom: 1;
      overflow: hidden;
      .list{
        cursor: pointer;
        float: left;
        margin-top: 5px;
        margin-right: 10px;
        border-radius: 4px;
        margin-bottom: 5px;
        p{
          font-size: 16px;
          color: #272727;
          padding: 4px 16px;
        }
      }
      .list-act{
        background: #5bb756;
        p{
          color: #fff;
        }
      }
    }
  }
}
.big-box{
  width: 100%;
  margin-top: 32px;
  height: auto;
  zoom: 1;
  .right-box{
    width: 980px;
    height: auto;
    zoom: 1;
    overflow: hidden;
    float: right;
  }
}
.selection{
  width: 220px;
  float: left;
  height: auto;
  box-sizing: border-box;
  border: 1px solid #5ebc57;
  .p-head{
    font-size: 16px;
    text-align: center;
    padding-top: 20px;
    font-weight: bold;
    color: #333;
  }
  .item{
    width: 186px;
    height: 200px;
    margin: 20px auto 0;
    display: block;
    .img{
      width: 100%;
      height: 140px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .down{
      width: 100%;
      height: 54px;
      .name{
        width: 100%;
        height: 28px;
        overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
        font-size: 14px;
        color: #2c2c2c;
        line-height: 28px;
        margin-top: 6px;
      }
      .price{
        font-size: 14px;
        color: #e73236;
        del{
          font-size: 12px;
          color: #a7a7a7;
        }
      }
    }
  }
}
.fresh-list-box{
    width: 100%;
    height: auto;
    zoom: 1;
    overflow: hidden;
    .list{
      width: 234px;
      height: 298px;
      float: left;
      box-sizing:border-box;
      border: 1px solid #d0d0d0;
      margin-left: 11px;
      margin-bottom: 12px;
      
      .img{
        display: block;
        width: 100%;
        height: 200px;
        img{
          width: 100%;
          height: 100%;

        }
      }
      .name{
        width: 92%;
        height: 26px;
        line-height: 26px;
        margin: 2px auto;
        font-size: 16px;
        color: #202020;
        overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
      }
      .down-box{
        width: 92%;
        height: 56px;
        margin: auto;
        .down-left{
          width: 130px;
          height: 100%;
          float: left;
          .price{
            font-size: 14px;
            color: #434343;
            width: 100%;
            height: 28px;
            line-height: 28px;
          }
          .buynow{
            display: block;
            width: 100%;
            height: 24px;
            line-height: 24px;
            font-size: 14px;
            background: #5bb756;
            color: #fff;
            text-align: center;
            margin-top: 3px;
            &:hover{
              background: #438440;
            }
          }
        }
        .add{
          width: 56px;
          height: 56px;
          cursor: pointer;
          border-box: box-sizing;
          border: 1px solid #2b6e26;
          border-radius: 100%;
          margin-right: 10px;
          float: right;
          &:hover{
            i{
              color: #438440;
            }
          }
          i{
            font-size: 38px;
            color: #2b6e26;
            font-weight: bold;
            padding-left: 7px;
            padding-top: 10px;
            float: left;
          }
        }
      }
    }
  }
</style>
